const template = `
	<div class="scan" style="height: 100%;">
		<van-nav-bar
			  title="扫一扫"
			  left-arrow
				@click-left="onBack"
			/>
		<div class="patrol__inner" style="height: calc(100% - 50px);">
			<div>
				<a class="button" type="button" id="startButton">Start</a>
				<a class="button" type="button" id="resetButton" @click="resetScan">Reset</a>
			</div>
		
			<div>
				<video id="video" width="100%" height="400" style="box-sizing:border-box;border: 1px solid gray"></video>
			</div>	
			
			<div id="sourceSelectPanel" style="display:none">
				<label for="sourceSelect">Change video source:</label>
				<select id="sourceSelect" style="max-width:400px">
				</select>
			</div>
			<div style="display: table">
				<label for="decoding-style"> Decoding Style:</label>
				<select id="decoding-style" size="1">
					<option value="once">Decode once</option>
					<option value="continuously">Decode continuously</option>
				</select>
			</div>
			
			<label>Result:</label>
			
			
		</div>	
			
	</div>
`;

// <pre><code id="result"></code></pre>

export default {
	created() {
		this.onload()
	},
	data() {
		return {
			codeReader: null, // code reader
			selectedDeviceId: null, // 选中的摄像机id
		}
	},
	// beforeRouteLeave() {
	// 	setTimeout(this.resetScan, 500)
	// },
	methods: {
		onload() {
			this.codeReader = new ZXing.BrowserQRCodeReader()
			console.log('ZXing code reader initialized')

			this.codeReader.getVideoInputDevices()
				.then((videoInputDevices) => {

					if (videoInputDevices.length === 0) {
						this.$toast(`未检测到摄像头，请稍后重试！`)
						return
					}

					const sourceSelect = document.getElementById('sourceSelect')
					this.selectedDeviceId = videoInputDevices[1].deviceId
					if (videoInputDevices.length >= 1) {
						videoInputDevices.forEach((element) => {
							const sourceOption = document.createElement('option')
							sourceOption.text = element.label
							sourceOption.value = element.deviceId
							sourceSelect.appendChild(sourceOption)
						})

						sourceSelect.onchange = () => {
							this.selectedDeviceId = sourceSelect.value;
						};

						const sourceSelectPanel = document.getElementById('sourceSelectPanel')
						sourceSelectPanel.style.display = 'block'
					}
					// 延迟开始扫描
					setTimeout(this.startScan, 500)



					// document.getElementById('startButton').addEventListener('click', () => {

					// 	const decodingStyle = document.getElementById('decoding-style').value;

					// 	if (decodingStyle == "once") {
					// 		this.decodeOnce(this.codeReader, this.selectedDeviceId);
					// 	} else {
					// 		this.decodeContinuously(this.codeReader, this.selectedDeviceId);
					// 	}

					// 	console.log(`Started decode from camera with id ${this.selectedDeviceId}`)
					// })


				})
				.catch((err) => {
					console.error(err)
				})

		},

		startScan() {
			const decodingStyle = document.getElementById('decoding-style').value;
			if (decodingStyle == "once") {
				this.decodeOnce(this.codeReader, this.selectedDeviceId);
			} else {
				this.decodeContinuously(this.codeReader, this.selectedDeviceId);
			}
			console.log(`Started decode from camera with id ${this.selectedDeviceId}`)
		},

		resetScan() {
			this.codeReader.reset()
			console.log('Reset.')
		},

		decodeOnce(codeReader, selectedDeviceId) {
			codeReader.decodeFromInputVideoDevice(selectedDeviceId, 'video').then((result) => {
				console.log(result)
				this.$toast(result.text)
				this.$router.push(`/main/patrolDetail/deviceId123`)
				// document.getElementById('result').textContent = result.text
			}).catch((err) => {
				console.error(err)
				// document.getElementById('result').textContent = err
			})
		},
		decodeContinuously(codeReader, selectedDeviceId) {
			codeReader.decodeFromInputVideoDeviceContinuously(selectedDeviceId, 'video', (result, err) => {
				if (result) {
					// properly decoded qr code
					console.log('Found QR code!', result)
					// document.getElementById('result').textContent = result.text
				}

				if (err) {

					if (err instanceof ZXing.NotFoundException) {
						console.log('No QR code found.')
					}

					if (err instanceof ZXing.ChecksumException) {
						console.log('A code was found, but it\'s read value was not valid.')
					}

					if (err instanceof ZXing.FormatException) {
						console.log('A code was found, but it was in a invalid format.')
					}
				}
			})
		},

		onBack() {
			this.resetScan()
			this.$router.go(-1)
			// this.$router.push(`/main`)
		},
	},

	template,

	components: {

	}
}
